<script setup lang="ts">
import {onBeforeMount, onBeforeUnmount, onMounted, ref, watch} from 'vue'
import {Swiper, SwiperSlide} from 'swiper/vue';
import {FreeMode, Navigation, Thumbs, Autoplay} from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
import {getImage} from "@/api";
import {Img} from "@/api/type";
const props = defineProps<{
  imageList: Img[]
}>()


const activeThumb = ref<any>(null)
const setActiveThumb = (index: any) => {
  activeThumb.value = index
}
const imageList = ref<Img[]>([])
//监听props.imageList变化
watch(() => props.imageList, (newVal, oldVal) => {
  if (newVal.length > 0) {
    imageList.value = newVal
  }
},{immediate:true})
const imageBase=''
</script>

<template>
  <section class="relative h-screen">
    <Swiper
        :modules="[FreeMode, Navigation, Thumbs, Autoplay]"
        :loop="true"
        :spaceBetween="10"
        :navigation="true"
        :thumbs="{
        swiper: activeThumb && !activeThumb.destroyed ? activeThumb : null,
        }"
        :autoplay="{
        delay: 5000,
        disableOnInteraction: false,
        }"
        class="full-slider h-screen"
    >
      <SwiperSlide v-for="(item,index) in imageList" :key="index">
        <div class="swiper-slide after:bg-jacarta-900/60 after:absolute after:inset-0">
          <img
              :src="imageBase+item.url"
              class="absolute inset-0 h-full w-full object-cover"
          />
        </div>
      </SwiperSlide>
    </Swiper>
    <div class="absolute inset-x-0 bottom-12">
      <div class="container">
        <Swiper
            :modules="[FreeMode, Navigation, Thumbs]"
            :loop="true"
            :spaceBetween="10"
            slidesPerView="auto"
            @swiper="setActiveThumb"
            :breakpoints="{
            100: {
            slidesPerView: 2,
            },
            768: {
            slidesPerView: 3,
            },
            }"
            class=" full-slider-thumbs swiper-initialized swiper-horizontal swiper-pointer-events swiper-thumbs"
        >
          <SwiperSlide
              class="swiper-slide cursor-pointer rounded p-5 swiper-slide-duplicate swiper-slide-duplicate-next "
              v-for="(item,index) in imageList"
              :key="index"
          >
            <img
                :src="imageBase+item.url"
                class="w-full rounded-lg"
                alt="thumb 1"
            />
            <div class="carousel-progress relative -bottom-5 z-10 -ml-5 -mr-5 h-0.5 bg-white/20 ">
              <div class="progress bg-accent absolute h-0.5 w-0"></div>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
    </div>
  </section>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
